<template>
  <div class="my-issues">
    <div class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/issues' }">问题管理</el-breadcrumb-item>
        <el-breadcrumb-item>我的问题</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="header-actions">
        <h1>我的问题</h1>
        <el-button type="primary" @click="createIssue">
          <el-icon><Plus /></el-icon>
          报告问题
        </el-button>
      </div>
    </div>

    <div class="content-container">
      <!-- 筛选器 -->
      <el-card class="filter-card">
        <el-form :model="filters" inline>
          <el-form-item label="状态">
            <el-select v-model="filters.status" placeholder="全部状态" clearable>
              <el-option label="待处理" value="open" />
              <el-option label="处理中" value="in_progress" />
              <el-option label="已解决" value="resolved" />
              <el-option label="已关闭" value="closed" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="filters.type" placeholder="全部类型" clearable>
              <el-option label="功能缺陷" value="bug" />
              <el-option label="功能需求" value="feature" />
              <el-option label="性能问题" value="performance" />
              <el-option label="用户体验" value="ux" />
              <el-option label="其他" value="other" />
            </el-select>
          </el-form-item>
          <el-form-item label="优先级">
            <el-select v-model="filters.priority" placeholder="全部优先级" clearable>
              <el-option label="低" value="low" />
              <el-option label="中" value="medium" />
              <el-option label="高" value="high" />
              <el-option label="紧急" value="urgent" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 问题列表 -->
      <el-card class="table-card">
        <el-table
          :data="filteredIssues"
          v-loading="loading"
          stripe
          @row-click="viewIssue"
          style="cursor: pointer;"
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
          <el-table-column prop="type" label="类型" width="100">
            <template #default="{ row }">
              <el-tag :type="getTypeTagType(row.type) as any" size="small" effect="plain">
                {{ getTypeText(row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" width="100">
            <template #default="{ row }">
              <el-tag :type="getPriorityTagType(row.priority) as any" size="small" effect="plain">
                {{ getPriorityText(row.priority) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status) as any" size="small">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="projectName" label="关联项目" width="150" show-overflow-tooltip />
          <el-table-column prop="assigneeName" label="处理人" width="100" />
          <el-table-column prop="createdAt" label="创建时间" width="120" />
          <el-table-column prop="dueDate" label="截止日期" width="120" />
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click.stop="viewIssue(row)">
                查看
              </el-button>
              <el-button 
                type="success" 
                size="small" 
                @click.stop="editIssue(row)"
                v-if="row.status !== 'closed'"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
// import { issueApi } from '@/api/issue'

const router = useRouter()
const loading = ref(false)
const issues = ref([])

const filters = reactive({
  status: '',
  type: '',
  priority: ''
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 模拟当前用户的问题数据
const mockIssues = [
  {
    id: '1',
    title: '登录页面样式错乱',
    description: '在Chrome浏览器下登录页面样式显示异常',
    type: 'bug',
    priority: 'high',
    status: 'open',
    projectId: '1',
    projectName: '电商平台重构项目',
    assigneeId: '2',
    assigneeName: '李四',
    reporterId: '1',
    reporterName: '张三',
    createdAt: '2024-01-15',
    updatedAt: '2024-01-16',
    dueDate: '2024-01-20'
  },
  {
    id: '2',
    title: '商品搜索功能优化',
    description: '希望增加按价格区间搜索的功能',
    type: 'feature',
    priority: 'medium',
    status: 'in_progress',
    projectId: '1',
    projectName: '电商平台重构项目',
    assigneeId: '3',
    assigneeName: '王五',
    reporterId: '1',
    reporterName: '张三',
    createdAt: '2024-01-10',
    updatedAt: '2024-01-18',
    dueDate: '2024-01-25'
  },
  {
    id: '3',
    title: '移动端适配问题',
    description: '在小屏幕设备上部分按钮显示不全',
    type: 'ux',
    priority: 'medium',
    status: 'resolved',
    projectId: '2',
    projectName: '移动端APP开发',
    assigneeId: '4',
    assigneeName: '赵六',
    reporterId: '1',
    reporterName: '张三',
    createdAt: '2024-01-08',
    updatedAt: '2024-01-19',
    dueDate: '2024-01-22'
  },
  {
    id: '4',
    title: '数据加载速度慢',
    description: '大数据量查询时页面响应时间过长',
    type: 'performance',
    priority: 'high',
    status: 'open',
    projectId: '3',
    projectName: '数据分析平台',
    assigneeId: '1',
    assigneeName: '张三',
    reporterId: '1',
    reporterName: '张三',
    createdAt: '2024-01-12',
    updatedAt: '2024-01-12',
    dueDate: '2024-01-30'
  }
]

// 根据筛选条件过滤问题
const filteredIssues = computed(() => {
  let result = [...issues.value] as any[]
  
  if (filters.status) {
    result = result.filter(issue => issue.status === filters.status)
  }
  
  if (filters.type) {
    result = result.filter(issue => issue.type === filters.type)
  }
  
  if (filters.priority) {
    result = result.filter(issue => issue.priority === filters.priority)
  }
  
  return result
})

const loadIssues = async () => {
  try {
    loading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 这里应该调用真实的API获取当前用户的问题
    // const response = await issueApi.getMyIssues({
    //   page: pagination.currentPage,
    //   size: pagination.pageSize,
    //   ...filters
    // })
    
    issues.value = mockIssues as any
    pagination.total = mockIssues.length
  } catch (error) {
    console.error('加载问题列表失败:', error)
    ElMessage.error('加载问题列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.currentPage = 1
  loadIssues()
}

const handleReset = () => {
  Object.assign(filters, {
    status: '',
    type: '',
    priority: ''
  })
  pagination.currentPage = 1
  loadIssues()
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  loadIssues()
}

const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  loadIssues()
}

const createIssue = () => {
  router.push('/issues/create')
}

const viewIssue = (row: any) => {
  router.push(`/issues/${row.id}`)
}

const editIssue = (row: any) => {
  router.push(`/issues/${row.id}/edit`)
}

// 获取类型标签样式
const getTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    bug: 'danger',
    feature: 'success',
    performance: 'warning',
    ux: 'info',
    other: ''
  }
  return typeMap[type] || ''
}

// 获取类型文本
const getTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    bug: '功能缺陷',
    feature: '功能需求',
    performance: '性能问题',
    ux: '用户体验',
    other: '其他'
  }
  return typeMap[type] || type
}

// 获取优先级标签样式
const getPriorityTagType = (priority: string) => {
  const priorityMap: Record<string, string> = {
    low: 'info',
    medium: '',
    high: 'warning',
    urgent: 'danger'
  }
  return priorityMap[priority] || ''
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
  const priorityMap: Record<string, string> = {
    low: '低',
    medium: '中',
    high: '高',
    urgent: '紧急'
  }
  return priorityMap[priority] || priority
}

// 获取状态标签样式
const getStatusTagType = (status: string) => {
  const statusMap: Record<string, string> = {
    open: 'danger',
    in_progress: 'warning',
    resolved: 'success',
    closed: 'info'
  }
  return statusMap[status] || ''
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    open: '待处理',
    in_progress: '处理中',
    resolved: '已解决',
    closed: '已关闭'
  }
  return statusMap[status] || status
}

onMounted(() => {
  loadIssues()
})
</script>

<style scoped>
.my-issues {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.header-actions h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #303133;
}

.content-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filter-card {
  margin-bottom: 0;
}

.table-card {
  flex: 1;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-table {
  margin-bottom: 0;
}

.el-table__row {
  cursor: pointer;
}

.el-table__row:hover {
  background-color: #f5f7fa;
}
</style>